<template>
    <div>
        <div class="publicity">
            <!-- 搜索栏 -->
            <div class="search-bar">
                <div class="input-box">
                    <input type="text" class="input" v-model="keyWords" placeholder="输入单位名称" >
                    <img src="/static/images/icon_search_btn.png" class="search-btn" @click="getOfficelList"/>
                </div>
                <picker @change="bindPickerChange" :range="columns">
                    <div class="select-box">
                        <span>常查单位</span>
                        <img src="/static/images/icon_jiantou.png" class="arrow-down"/>
                    </div>
                </picker>
            </div>
			
			<!-- 关键词搜索单位列表 -->
			<div class="offic-list" v-if="!openInfoFlag && officeList.length !== 0">
                <div class="offic-list-item" v-for="(item,index) in officeList" :key="index" @click="clickOfficeList(item.id)">
                    <div class="item-left">
                        <div class="offic-info">
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 轮播图 -->
			<block v-if="!openInfoFlag && officeList.length == 0">
				<swiper 
					:indicator-dots="indicatorDots"
					:autoplay="autoplay" 
					:interval="interval" 
					:duration="duration"
					:circular="circular"
					class="swiper"
				>
					<block v-for="(item,index) in swiperList" :key="index">
						<swiper-item>
							<img class="swiper-img" :src="item.url" mode="widthFix">
						</swiper-item>
					</block>
				</swiper>
            </block>

            <!-- 内容 -->
            <div class="publicity-content" v-if="openInfoFlag && officeList.length == 0">
                <div class="nav">
					<img class="nav-bg" src="/static/images/sanwu_nav_bg.jpg">
					<div class="party" @click="navClick(1)">
						<img src="/static/images/icon_party.png">
						<span :class="{'active':navIndex == 1}">党务公开</span>
						<div class="line" v-if="navIndex == 1"></div>
					</div>
					<div class="politics" @click="navClick(2)">
						<img src="/static/images/icon_politics.png">
						<span :class="{'active':navIndex == 2}">政务公开</span>
						<div class="line" v-if="navIndex == 2"></div>
					</div>
					<div class="finance" @click="navClick(3)">
						<img src="/static/images/icon_finance.png">
						<span :class="{'active':navIndex == 3}">财务公开</span>
						<div class="line" v-if="navIndex == 3"></div>
					</div>
                </div>

				<!-- 党务 -->
				<scroll-view
					scroll-y="ture"
					class="scroll-view"
					v-if="navIndex == 1"
				>
					<block v-if="dangOpenInfoList.length !== 0">
						<block v-for="(item,index) in dangOpenInfoList" :key="index">
							<div class="scroll-view-item">
								<img class="scroll-view-img" :src="item.imageUrl" mode="widthFix">
							</div>
						</block>
					</block>
					<block v-else>
						<div class="scroll-view-img">
							暂无信息
						</div>
					</block>
				</scroll-view>

				<!-- 村务 -->
				<scroll-view
					scroll-y="ture"
					class="scroll-view"
					v-if="navIndex == 2"
				>
					<block v-if="cunOpenInfoList.length !== 0">
						<block v-for="(item,index) in cunOpenInfoList" :key="index">
							<div class="scroll-view-item">
								<img class="scroll-view-img" :src="item.imageUrl" mode="widthFix">
							</div>
						</block>
					</block>
					<block v-else>
						<div class="scroll-view-item">
							暂无信息
						</div>
					</block>
				</scroll-view>

				<!-- 财务 -->
				<scroll-view
					scroll-y="ture"
					class="scroll-view"
					v-if="navIndex == 3"
				>
					<block v-if="caiOpenInfoList.length !== 0">
						<block v-for="(item,index) in caiOpenInfoList" :key="index">
							<div class="scroll-view-item">
								<img class="scroll-view-img" :src="item.imageUrl" mode="widthFix">
							</div>
						</block>
					</block>
					<block v-else>
						<div class="scroll-view-img">
							暂无信息
						</div>
					</block>
				</scroll-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            indicatorDots: false,  //是否显示面板指示点
            autoplay: true, //是否自动播放
            interval: 15000,//时间间隔
            duration: 500, //动画滑动时长
			circular: true, //是否采用衔接滑动
			swiperList: [
				{
                    url: "/static/images/sanwu1.jpg",
                },
                {
                    url: "/static/images/sanwu2.jpg",
				},
			],
			dangOpenInfoList:[],//党务公开信息
			cunOpenInfoList:[],//村务公开信息
			caiOpenInfoList:[],//财务公开信息
			openInfoList:[],
            officeList:[],//单位列表
            columns: [],//单位名称
            columnsId: [],//单位ID
            keyWords: '',//搜索关键词
			navIndex: 0,
			navIndicatorDots: "true",  //是否显示面板指示点
			indicatorColor: '#000', //指示点颜色
			navDuration: 500, //动画滑动时长
			deptID: '', //当前选中ID
			openInfoFlag: false, //显示信息开关
        }	
	},
	onShow(){
		this.getRegionlDataList("");
	},
    methods:{
		async getOfficeOpenInfo(type,deptID ,eventType=''){
				uni.showLoading(
					{
						title: '加载中',
					}
				)
				if(eventType == "PickerChange"){
					this.navIndex = 1;
				}else{
					this.navIndex = type
				}
				; //选中的按钮显示样式
				this.deptID = deptID; //存储单位ID
				let str = type + '/' + deptID
				let res = await this.$http.getOfficeOpenInfo(str)
				if(res.statusCode == 200 && res.data.code == 200){
					
					//判断是那种类型的数据
					if(type == 1){
						this.dangOpenInfoList = res.data.result;
					}else if(type == 2){
						this.cunOpenInfoList = res.data.result;
					}else{
						this.caiOpenInfoList = res.data.result;
					}
					//判断三项数据都为空时才做操作
					if(this.dangOpenInfoList.length == 0 && this.cunOpenInfoList.length == 0 && this.caiOpenInfoList.length == 0){
						this.openInfoFlag = false;
						uni.showToast({
							title: "该单位暂无数据",
							icon: 'none',
							duration: 3000
						})
						return
					}else{
						this.openInfoFlag = true;
					}
					this.officeList = [];
				}else{
				}
			},
		//根据条件获取单位数据
		async getRegionlDataList(district){
			let paramas = {
				regionName: district
			}
			uni.showLoading(
				{
					title: '加载中',
				}
			)
			let res = await this.$http.getRegionlDataList(paramas)
			if(res.data.success && res.data.code == 200){
				let arr = [];
				let arrId = []; 
				res.data.result.forEach((item,index)=>{
					arr.push(item.name);
					arrId.push(item.id);
				})
				this.columns = arr;
				this.columnsId = arrId;
			}else{
			}
		},
		//关键词搜索单位列表点击
		clickOfficeList(id){
			//清空数据！！！！
			this.dangOpenInfoList = []
			this.cunOpenInfoList = []
			this.caiOpenInfoList = []

			this.getOfficeOpenInfo("1",id,"PickerChange")
			this.getOfficeOpenInfo("2",id,"PickerChange")
			this.getOfficeOpenInfo("3",id,"PickerChange")
		},
		//弹出层选择改变
		bindPickerChange(e){
			this.getOfficeOpenInfo("1",this.columnsId[e.detail.value],"PickerChange")
			this.getOfficeOpenInfo("2",this.columnsId[e.detail.value],"PickerChange")
			this.getOfficeOpenInfo("3",this.columnsId[e.detail.value],"PickerChange")
		},
		//根据关键词获取列表
		async getOfficelList(){
			let paramas = {
				deptName: this.keyWords
			}
			if(this.keyWords.length == 0){
				uni.showToast({
					title: '请输入单位名称',
					icon: 'none',
					duration: 2000
				})
				return
			}
			uni.showLoading(
				{
					title: '加载中',
				}
			)
			let res = await this.$http.getOfficelList(paramas)
			if(res.statusCode == 200 && res.data.code == 200){
				let list = res.data.result;
				if(list.length == 0){
					this.keyWords = ''
					uni.showToast({
						title: "该单位暂无人员信息",
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.openInfoFlag = false;
				this.officeList = list;
			}else{
			}
		},
		//点击导航按钮改变内容
		navClick(index){
			this.navIndex = index;
			this.getOfficeOpenInfo(index,this.deptID)
		},
    }
}
</script>

<style lang="scss" scoped>
    .publicity{
		background-color: #ffffff;
		min-height: 100vh;
		overflow: hidden;
		z-index: -2;
		.search-bar{
		    width: 100%;
		    height: 100rpx;
		    background-color: #fff;
		    padding: 0 28rpx 0 20rpx;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    box-shadow: #eeeeee 0px 4rpx 5rpx;
		    .input-box{
		        max-width: 528rpx;
		        height: 6rpx;
		        display: flex;
		        justify-content: flex-start;
		        align-items: center;
		        margin-left: 14rpx;
		        .input{
		            width:380rpx;
		            height:76rpx;
		            background:rgba(238,238,238,1);
		            font-size: 28rpx;
		            padding-left: 15rpx;
		        }
		        .search-btn{
		            width:82rpx;
		            height:76rpx;
		            background-size: 100% 100%;
		            background-repeat: no-repeat;
		            position: relative;
		            left: -1rpx;
		        }
		    }
		    .select-box{
		        width:200rpx;
				height:76rpx;
				background:rgba(238,238,238,1);
				box-shadow:0px 5rpx 5rpx 0px rgba(125,85,33,0.24);
		        display: flex;
		        justify-content: center;
		        align-items: center;
				margin-left: 19rpx;
				margin-top: -3rpx;
		        &>span{
					height:22rpx;
					font-size:22rpx;
					font-weight:bold;
					color:rgba(87,87,87,1);
		        }
				.arrow-down{
					width: 18rpx;
					height: 11rpx;
					margin-left: 4rpx;
				}
		    }
		}
		.offic-list{
            height: 90vh;
            overflow: scroll;
            padding-bottom: 8rpx;
            .offic-list-item{
                width: 694rpx;
                height: 115rpx;
                margin: 0 auto;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 24rpx;
                padding: 0 3rpx;
				box-shadow: #bbb 0rpx 5rpx 8rpx;
				border-radius: 3rpx;
                .item-left{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .offic-info{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        span{
                            font-size:36rpx;
                            -webkit-transform:scale(0.8);
                            font-weight: 600;
                        }
                    }
                }
            }
        }
		.swiper{
			width: 100%;
			height: 100vh;
			.swiper-img{
				width: 100%;
				height: 100vh;
			}
		}
		.publicity-content{
			position: relative;
			.nav{
				width:750rpx;
				height:176rpx;
				background-color: #ccc;
				box-shadow:0rpx 7rpx 5rpx 0rpx rgba(62,62,62,0.43);
				display: flex;
				justify-content: center;
				align-items: center;
				.nav-bg{
					width:750rpx;
					height:176rpx;
					position: absolute;
					top: 0;
					left: 0;
				}
				&>div{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 100%;
					position: relative;
					img{
						width: 98rpx;
						height: 98rpx;
					}
					span{
						font-size:24rpx;
						font-weight:bold;
						color:rgba(87,87,87,1);
						margin-top: 8rpx;
					}
					.line{
						position: absolute;
						bottom: 5rpx;
						width:123rpx;
						height:9rpx;
						background:linear-gradient(-38deg,rgba(249,47,23,1) 0%,rgba(239,103,35,1) 100%);
					}
					.active{
						color: #F73E1B !important;
					}
				}
			}
			.scroll-view{
				width: 100%;
				height: 82vh;
				background-color: #d8d8d8;
				.scroll-view-item{
					padding: 26rpx;
				}
				.scroll-view-item:last-child{
					padding-bottom: 136rpx;
				}
				.scroll-view-img{
					width:699rpx;
					box-shadow:8px 13px 5px 0px rgba(62,62,62,0.43);
				}
			}
		}
	}
	.bgf{
		background-color: #fff !important;
	}
</style>